<template>
  <div class="pages userManagement">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <!-- <el-form-item label="" label-width="15px">
                        <div class="tableSearch tableSearchs">
                            <i class="el-input__icon el-icon-search"></i>
                            <el-form label-width="100px" class="demo-ruleForm">
                                <el-form-item label="" label-width="15px">
                                    <el-input class="input" v-model="findUserName" size="small" placeholder="用户名称查询"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-form-item> -->
          <el-form-item label="" label-width="15px">
            <div class="tableSearch tableSearchs">
              <i class="el-input__icon el-icon-search"></i>
              <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="" label-width="15px">
                  <el-input class="input" v-model="findMobile" size="small" placeholder="手机号查询" maxlength='11' @keyup.enter.native='getTableData(pageSize, 1)'></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-form-item>
          <el-form-item label="账号状态:" label-width="100px">
            <el-select size="small" v-model="value" style="width:190px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" size="mini" @click="getTableData(pageSize, 1)">查询</el-button>
          </el-form-item>
          <el-form-item label="" label-width="15px" v-if="setRole('新增')">
            <el-button type="primary" icon="el-icon-plus" size='mini' @click="routerPush('new')">创建用户</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="code" label="编号" align="center"></el-table-column>
        <el-table-column prop="linkName" label="姓名" align="center" width="85"></el-table-column>
        <el-table-column prop="mobile" label="手机号号码" align="center"></el-table-column>
        <el-table-column prop="typeName" label="职位" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" :formatter="trunTime"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" align="center" :formatter="trunTime"></el-table-column>
        <el-table-column prop="status" label="账号状态" align="center" :formatter="turnStatus"></el-table-column>
        <!-- <el-table-column prop="experience" label="描述" align="center" :formatter="turnStatus"></el-table-column> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="routerPush('see',scope.row.userId)" type="text" class="addDetail">查看</el-button>
            <el-button size="small" @click="stopUser(scope.row.userId, scope.row.status)" type="text" v-if='setRole("修改")' class="addDetail">{{scope.row.status == 0 ? '停用' : '启用'}}</el-button>
            <el-button size="small" v-if="setRole('删除')" @click="deleteUser(scope.row.userId)" type="text" class="addDetail">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pageblock">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="500px">
        <span>是否退出当前商户?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import util from "@/util";
import { mapState } from "vuex";
import { findUserList, deleteUser, isDeactivate } from "@/api";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      findUserName: "",
      findMobile: "",
      value: "",
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "启用"
        },
        {
          value: "1",
          label: "停用"
        }
      ]
    };
  },
  computed: {
    ...mapState({
      sub: state => state.sub,
      power: state => state.power,
      merchantId: state => state.merchantId,
      userId: state => state.userId
    })
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getTableData(this.pageSize, 1);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getTableData(this.pageSize, this.currentPage);
  },
  methods: {
    deleteUser(id) {
      if (this.userId == id) {
        this.dialogVisible = true;
      } else {
        deleteUser({
          userId: this.userId,
          delUserIds: id,
          merchantId: this.merchantId
        }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getTableData(this.pageSize, this.currentPage);
          }
        });
      }
    },
    stopUser(id, status) {
      var s = status == 0 ? 1 : 0;
      var t = s == 1 ? "停用" : "启用";
      this.$confirm(`确认${t}该账号吗?`)
        .then(_ => {
          let data = {
            userId: id,
            status: s,
            businessId: this.merchantId
          };
          isDeactivate(data).then(res => {
            this.getTableData(this.pageSize, this.currentPage);
          });
          done();
        })
        .catch(_ => {});
    },
    turnStatus(row, column, cellValue) {
      if (cellValue == 0) {
        return "启用";
      } else if (cellValue == 1) {
        return "停用";
      }
    },
    cancel() {
      this.dialogVisible = false;
    },
    confirm() {
      deleteUser({
        userId: this.userId,
        delUserIds: this.userId,
        merchantId: this.merchantId
      }).then(res => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.$alert("删除成功,将会为您跳转至登录窗口", "提示", {
            confirmButtonText: "确定",
            callback: () => {
              Cookies.remove(process.env.COOKIE_NAME + "_companyName");
              Cookies.remove(process.env.COOKIE_NAME + "_isFirstLogin");
              Cookies.remove(process.env.COOKIE_NAME + "_isShop");
              Cookies.remove(process.env.COOKIE_NAME + "_linkName");
              Cookies.remove(process.env.COOKIE_NAME + "_merchantId");
              Cookies.remove(process.env.COOKIE_NAME + "_token");
              Cookies.remove(process.env.COOKIE_NAME + "_userInfo");
              Cookies.remove(process.env.COOKIE_NAME + "_soUrce");
              Cookies.remove(process.env.COOKIE_NAME + "_isOwnAuth");
              Cookies.remove(process.env.COOKIE_NAME + "_businessScope");
              location.reload();
            }
          });
        }
      });
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    getTableData(pageSize, pageNum) {
      findUserList({
        merchantId: this.merchantId,
        findUserName: this.findUserName,
        findMobile: this.findMobile,
        pageNum: pageNum,
        pageSize: pageSize,
        status: this.value
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.userList;
          this.total = res.data.pageTotal;
        }
      });
    },
    routerPush(handle, userId = "") {
      util.routerTo("/operate-management/user-management/user-details", {
        handle: handle,
        userId: userId,
      });
    },
    // formatter
    trunTime(row, column, cellValue) {
      return util.foryear(cellValue) + " " + util.fortime(cellValue);
    },
    // 更改每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.getTableData(this.pageSize, val);
    }
  }
};
</script>
<style lang="less" scoped>
.userManagement {
  position: absolute;
  top: 70px;
  left: 11px;
  right: 11px;
  bottom: 10px;
  // overflow: auto;
  .tableSearchs {
    position: relative;
    margin-top: -10px;
    .el-input__icon {
      position: absolute;
      top: 12px;
      left: 170px;
      z-index: 10;
      width: 25px;
      height: 35px;
    }
  }
}
</style>
